<template>
	<view class="top-cont"></view>
	<!-- 头像栏 -->
	<view class="flex align-center margin-left">
		<image class="cu-avatar round" :src="details?.avatar" mode="">
		</image>
		<view class="margin-left ">
			<view class="flex align-center">
				<text class="font-bold text-lg">
					{{details?.username}} </text>
				<text class="margin-left"> 创建于</text>
				<text class="text-blue">
					<!-- 文集name -->
					【{{details?.titlename||'默认文集'}}】</text>
			</view>

			<text class="text-grey text-sm">
				{{details?.createdAt}}</text>
		</view>
	</view>
	<view class="divider"></view>

	<!-- 内容区 -->
	<view class="cont">
		<view class="flex justify-center">
			<image :src="details?.image" mode=""></image>
		</view>

		<view class="content-wrapper">
			<view class="text-content">
				{{ details?.content }}
			</view>
		</view>
	</view>

	<!-- 底部导航区 -->
	<view class="myBottom">
		<view class="divider bm"></view>
		<view class="flex justify-between margin margin-bottom-xs">
			<view class="">
				<view class="card-actions">
					<text class="cu-item cuIcon-back text-lg text-grey" @click="onBack"></text>
					<text class="action-item">
						<text class="iconfont icon-fuhao-biaoqian  margin-right-xs"
							:class="{active:actStatus.favorites}" @click="handleAction('favorites')"></text>
						<!-- form.favorites -->
						{{details?.favorites}}
					</text>
					<text class="action-item">
						<text class="iconfont icon-speechbubble text-grey margin-right-xs"
							@click="handleToComents(details?.objectId)"></text>
						<!-- form.comments -->
						{{details?.comments}}
					</text>
					<text class="action-item">
						<text class="iconfont icon-aixin2 text-grey margin-right-xs" :class="{active:actStatus.likes}"
							@click="handleAction('likes')"></text>
						<!-- form.likes -->
						{{details?.likes}}
					</text>
				</view>
			</view>
			<view class="flex justify-around more">
				<text class="cu-item cuIcon-share text-lg text-grey" @click=""></text>
				<text class="cu-item cuIcon-more text-lg text-grey" @click=""></text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, type Ref } from 'vue';
	import type { Post } from '@/model/goods';
	import { onLoad } from '@dcloudio/uni-app';
	import http from '@/utils/http';
	import { goodUpdate } from '@/api/createGoods_api';

	const details : Ref<Post | null> = ref(null)

	//加载id请求数据
	onLoad(async (options) => {
		console.log(options);
		let detailsId = options?.id
		let res = await http.get(`/classes/goods/${detailsId}`)
		console.log(res);
		details.value = res.data
	})

	// 互动点击
	const actStatus = ref({
		favorites: false,
		comments: false,
		likes: false
	})
	type fieldType = 'favorites' | 'comments' | 'likes'
	const handleAction = async (field : fieldType) => {
		actStatus.value[field] = !actStatus.value[field]
		details.value![field] = actStatus.value[field] ? details.value![field] + 1 : Math.max(0, details.value![field] - 1);
		await goodUpdate(details.value?.objectId!, { [field]: details.value![field] })
	}

	// 底部功能区
	// 返回
	const onBack = () => {
		uni.navigateBack({ delta: 1 });
	};
	// 跳转评论
	const handleToComents=(id : string)=>{
		uni.navigateTo({
			url: `/pages/coments/coments?id=${id}`
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.top-cont {
		height: 90upx;
		background-color: #FFFFFF;
	}

	.divider {
		width: 100%;
		height: 1upx;
		background-color: #e5e7eb;
		margin: 15upx 0 15upx;

		&.bm {
			box-shadow: 0 0 1upx #aaa;
		}
	}

	// 内容
	.cont {
		image {
			width: 90%;
			max-height: 400upx;
			object-fit: cover;
		}

		// 文本内容
		.content-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); //居中
			width: 80%;
			max-width: 600upx;
			padding: 20upx;
		}

		// 文本内容样式
		.text-content {
			font-size: 32upx;
			line-height: 1.8;
			text-align: center;
			text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.3); // 文字阴影
			white-space: pre-wrap; // 保留文本中的换行和空格
			word-break: break-word; // 长单词自动换行，避免溢出
		}
	}

	// 底部
	.myBottom {
		width: 100%;
		position: fixed;
		bottom: 0;

		.more {
			width: 150upx;
		}
	}

	.card-actions {
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 26px;
		margin-bottom: -20upx;

		.action-item {
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #999;

			.active {
				color: #ff2266;
			}
		}
	}
</style>